<template>
  <div class="bills-box scroll-box">
    
    <div class="checkout">
      <div class="name wrap">
        {{ account.checkout.name }}
      </div>
      <div class="time">
        {{ cashboxWhere.time[0] ? time.format(cashboxWhere.time[0])  + ' - ' : '' }}
        {{ cashboxWhere.time[1] ? time.format(cashboxWhere.time[1]) : '' }}
      </div>
    </div>
    <div class="box">
      <Levelpassword>
        <div class="box-card" style="margin-bottom: 20px">
          <div class="pay">
            <div class="item" v-for="(item, index) in pay" :key="index">
              <div class="name">{{ item.name }}</div>
              <div class="money font-number">{{ money(cashboxTotal[item.id] ?? 0) }}</div>
            </div>
            <div class="item">
              <div class="name">{{ plugin.lang('bills.pay_total') }}</div>
              <div class="money font-number">{{ money(cashboxTotal.money) }}</div>
            </div>
          </div>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="box-card">
              <div class="total">
                <div class="money font-number">{{ money(form.start_money) }}</div>
                <div class="name">{{ plugin.lang('bills.start_money') }}</div>
              </div>
              <div class="total f">
                <div class="money font-number">{{ money(form.pay_money) }}</div>
                <div class="name">{{ plugin.lang('bills.pay_money') }}</div>
              </div>
              <div class="total f">
                <div class="money font-number">{{ money(form.cash_money) }}</div>
                <div class="name">{{ plugin.lang('bills.cash_money') }}</div>
              </div>
              <div class="total f">
                <div class="money font-number color">{{ money(form.total) }}</div>
                <div class="name">{{ plugin.lang('bills.total') }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box-card" style="padding: 20px">
              <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
                <el-form-item :label="plugin.lang('bills.with_money')" prop="with_money">
                  <el-input-number v-model="form.with_money" style="width: 100%;" controls-position="right" />
                </el-form-item>
              </el-form>
              <el-alert :title="plugin.lang('bills.sub_money') + ' ' + money(form.sub_money)" :type="form.sub_money < 0 ? 'error' : 'success'" style="margin-bottom: 20px" :closable="false"/>
              <el-button type="primary" size="large" :loading="loading" @click="onPost" style="width: 100%">{{ plugin.lang('bills.btn') }}</el-button>
            </div>
          </el-col>
        </el-row>
      </Levelpassword>
    </div>
  </div>
</template>

<script>
import { ref, watch, onUnmounted } from 'vue'
import app from '@/app'
import cashbox from '../../common/cashbox'
import accountModel from '@/model/account'
import payModel from '@/plugin/config/model/pay'
import Levelpassword from '@/components/levelpassword'

export default {
  components: {
    Levelpassword
  },
  setup() {
    // 钱箱统计
    const cashboxTotal = cashbox.total
    const cashboxWhere = cashbox.where

    // 当前收银台显示
    const account = accountModel.getData()

    // 支付方式
    const pay = payModel.getAll()

    // 表单
    const formRef = ref(null)
    const form = cashbox.data

    // 验证
    const rules = {
      with_money: [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 提交
    const loading = ref(false)
    const onPost = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          cashbox.post(form.value).then(() => {
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    // 统计钱箱
    const onCash = () => {
      cashbox.get()
    }

    // 定时器
    const timer = setInterval(onCash, 10000)
    onUnmounted(() => {
      clearInterval(timer)
    })

    // 更新余额
    watch(() => form.with_money, () => {
      cashbox.totalMoney()
    })

    onCash()

    return {
      plugin: app.plugin.index,
      money: app.money,
      time: app.time,
      cashboxTotal,
      cashboxWhere,
      pay,
      account,
      formRef,
      form,
      rules,
      loading,
      onPost
    }
  }  
}
</script>